<template>
  <div class="pinpaily">
    <div v-for="(v, i) in allPinpai" :key="i">
      <p>————{{ v.title }}————</p>
      <div class="pinpaiInfo">
        <div
          :id="item.brandid"
          @click="tzppInfo(item.brandid)"
          v-for="item in v.list"
          :key="item.brandid"
        >
          <div>
            <img :src="item.logo" alt="" />
          </div>
          <p>{{ item.name }}</p>
          <p>{{ item.address }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "pinpai",
  data() {
    return {
      allPinpai: null,
    };
  },
  async created() {
    //    https://mallcdn.api.epet.com/v3/brand/list/main.html?pet_type=dog&system=wap&isWeb=1&version=303&distinct_id=17c2b39bc8d274-022dcac363853b8-17466957-230400-17c2b39bc8e91c&_=1633240563313

    let pinpais = await this.axios({
      url: `https://mallcdn.api.epet.com/v3/brand/list/main.html?pet_type=dog&system=wap&isWeb=1&version=303&distinct_id=17c2b39bc8d274-022dcac363853b8-17466957-230400-17c2b39bc8e91c&_=1633240563313`,
    });
    // console.log(pinpais.data.brand);
    this.allPinpai = pinpais.data.brand;
    
  },
  methods: {
    tzppInfo(a) {
      this.$router.push({
        name: "rmpp",
        query: {
          name: a,
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.pinpaily {
  margin-top: 0.82rem;
  background-color: rgb(235, 235, 235);
  margin-bottom: 1.06rem;
  > div {
    //    margin-top: .2rem;
    > p {
      background-color: #fff;
      height: 1.2rem;
      line-height: 1.2rem;
      text-align: center;
      margin-bottom: 0;
    }
  }
  .pinpaiInfo {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-around;

    background-color: #fff;
    > div {
      width: 30%;
      margin-bottom: 0.3rem;
      > div {
        width: 2.2rem;
        height: 1.2rem;
        text-align: center;
        box-sizing: border-box;
        padding-top: 0.15rem;
        border: 0.02rem solid rgb(236, 236, 236);
        > img {
          width: 1.6rem;
          height: 0.8rem;
        }
      }
      > p {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        height: 0.4rem;
        width: 100%;
        margin: 0 !important;
        text-align: center !important;
      }
      > p:nth-child(3) {
        color: rgb(163, 163, 163);
      }
    }
  }
}
</style>